import React, {useEffect, useMemo, useRef, useState} from 'react';
import {Provider} from './context'
import './css/bootstrap.min.css';
import './css/font-awesome.css';
import './img/favicon.ico';
import './css/navigation-bar.css';
import './css/index.css';
import './css/fyxq.css';
import './css/footer.css';
import Picture from "./picture";
import Landlord from "./landlord";
import Location from "./location";
import aibiying from './img/aibiying.png'
import hardware from './img/hardware.jpg'
import yes from './img/yes.jpg'
import small_star from './img/small_star.png'
import report from './img/report.png'
import public_security_bureau_logo from './img/public_security_bureau_logo.png'
import similar from './img/similar.jpg'
import Rednav from '../../components/Rednav'
import Map from "../detail_more/components/map";


function Index() {
    const [didian, setDidian] = useState("上海市虹桥国际机场")

    const fn = (n:any) => {
        setDidian(n)
    }
    // const ref:any=useRef(window)
    // let [obj,setobj]=useState(1)
    useEffect(()=>{
        // console.log(ref.current.location.reload)
        // ref.current.location.reload()
        // setobj(obj=ref.current.location.href.split('detailid=')[1])
        // console.log(obj)
    },[])
    return (
        <div>
            <Rednav/>

            {/*主体内容*/}
                <div className="row">

                    {/*置顶图片*/}
                        <Picture/>

                    <div>
                        <div className="col-md-5 col-md-offset-2">
                            <div id="brc-menu" className="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="550"
                                 data-offset-bottom="900">
                                <h4>详情 · 评价 · 可订日期 · 位置 · 须知 · 房东</h4>
                            </div>
                        </div>
                    </div>


                    <div id="brc-main_body">
                        <div className="col-md-5 col-md-offset-2">
                            <div id="brc-room_name">
                                <br />
                                <h5 className="text-danger">成都市 · 整套公寓</h5>
                                    <Location/>
                                    <h4>
                                        <i className="fa fa-bank">1间卧室</i>
                                        <i className="fa fa-bed" aria-hidden="true">1张床</i>
                                        <i className="fa fa-bath" aria-hidden="true">1间卫生间</i>
                                        <i className="fa fa-group"> 最多住2人</i>
                                    </h4>
                            </div>

                            <Landlord/>

                            <div id="brc-room_depiction" className="jumbotron">
                                <h4>我在成都有3个公寓,都在同一个小区,点击我的头像可以查看其他房源~
                                    最近废柴的我回了南京,房子暂时交给认真负责又好说话的姨妈打理｡
                                    公寓位于春熙路附近高档公寓楼,从地铁站出来2分钟就到｡步行10分钟就能到IFS｡
                                    公寓风格比较活泼可爱, 床､沙发和懒人沙发都特别舒服,躺下就不想起来｡
                                    房间里提供毛巾牙刷蜡烛等等,所有东西都有品质保证｡楼下有便利店药店水果店餐馆等等,满足旅行装备补给的需求｡
                                    房间门口放置了密码钥匙盒,凌晨入住的客人也不用担心取钥匙的问题｡
                                    床上用品一客一换,使用阳台上的烘干机烘干床上用品,有时候会有褶皱,敬请谅解｡特别欢迎大家前来入住,么么哒!
                                </h4>
                            </div>
                            {/*房间细节*/}
                            <div id="brc-room_detail">
                                <dl className="dl-horizontal">
                                    <dt>整套房子/公寓</dt>
                                    <dd>无需与房东或房客共享空间，独享整个房源</dd>
                                    <dt>超赞房东</dt>
                                    <dd>超赞房东经验丰富、评分很高，他们致力于为房客提供优质的住宿体验</dd>
                                    <dt>入住/退房</dt>
                                    <dd>入住时间 14:00后 · 退房时间 12:00</dd>
                                </dl>
                            </div>
                            {/*房间硬件+aws图标*/}
                            <div id="brc-room_hardware">
                                <img src={hardware} />
                            </div>
                            {/*评分（优码网:基于Bootstrap的jQuery星级评分插件bootstrap-star-rating）*/}
                            <div id="brc-room_score">
                                <h2>评分</h2>
                                {/*<input id="input-id" type="number" className="rating" min=0 max=5 step=0.5 data-size="xs"/>*/}
                            </div>
                            {/*可订日期+日期模块*/}
                            <div id="brc-usable_date">
                                <h2>可订日期</h2>
                                <h3>10天更新</h3>
                                <input type="text" id="brc-usable_date1"/>
                                    <input type="text" id="brc-usable_date2"/>
                                        <h5>输入日期以查看总价格，包含额外附加费用及适用税费。</h5>
                            </div>
                            {/*房间位置*/}
                            <div id="brc-room_position">
                                <h2>位置</h2>
                                <h3>成都市，四川省，中国</h3>
                                <h4>公寓位于高档公寓楼红星国际里,地理位置很好,拿着箱子从地铁站出来走200米就到了｡
                                    距离春熙路和太古里特别近,都不用坐地铁,顺着路直走500米就到了｡
                                    去宽窄巷子坐地铁3站路也方便｡整个楼盘闹中取静,而且6号楼在最里面,所以很安静｡
                                    公寓楼下有便利店快餐店药店水果店等等,尤其是3家便利店都是24小时营业的,很方便买东西｡
                                    公寓楼下有抿嘴串串香,白家肥肠粉,川菜馆,清淡的有社区食堂快餐店,附近有康二姐串串,码头故事火锅
                                </h4>
                            </div>
                            {/*出行信息（交通）*/}
                            <div id="brc-traffic">
                                <h2>出行信息</h2>
                                <h4>公寓的交通情况
                                    距离春熙路商圈和太古里500米以内,可步行前往｡
                                </h4>
                            </div>
                            {/*地图（选做）*/}
                            <div id="brc-map">
                                <Map dd={didian}></Map>
                            </div>
                            {/*附近*/}
                            <div id="brc-nearby">
                                <h4><i className="fa fa-subway" aria-hidden="true"></i> 附近地铁站：市二医院（约300米）、太升南路（约900米）</h4>
                                <h4><i className="fa fa-camera" aria-hidden="true"></i> 周边热门：大慈寺（约700米）、太古里（约800米）、春熙路（约900米）</h4>
                                <h4><i className="fa fa-university" aria-hidden="true"></i> 房源具体位置将在预订确认后提供</h4>
                            </div>
                            {/*须知*/}
                            <div id="brc-notice">
                                <h2>须知</h2>
                                <h3>基本要求</h3>
                                <h4>不适合婴幼儿（2岁以内）入住</h4>
                                <h4>禁止吸烟</h4>
                                <h4>不允许携带宠物</h4>
                                <h4>不允许举办派对和活动</h4>
                                <h3>预订取消政策</h3>
                                <h4>中等政策——48小时内免费取消 · 限时全额退款</h4>
                                <h3>交易提示</h3>
                                <h4>为了保护您的账号隐私和付款安全，请不要相信其它任何平台的折扣或礼金券代订，并始终在爱彼迎站内转账和交流。</h4>
                            </div>
                            {/*房东留言*/}
                            <div id="brc-master_word">
                                <h2>与房客的互动</h2>
                                <h3>会在入住前一晚和客人联络,希望得知客人入住的时间｡
                                    希望客人离开的时候能发短信或电话告知房东,有任何意见欢迎提出来｡
                                    遇到问题请不要犹豫,立刻联系我呀!
                                </h3>
                            </div>
                        </div>

                        <div className="col-md-3">
                            {/*预定板块*/}
                            <div id="brc-reserve" className="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="550"
                                 data-offset-bottom="900">
                                <div id="brc-room_price" className="col-md-10 col-md-offset-1 text-left">
                                    <div id="brc-room_price_font0">
                                <span id="brc-room_price_font1">
                                    <b>￥238</b>
                                </span>
                                        <span id="brc-room_price_font2">
                                    <b>每晚</b>
                                </span>
                                    </div>
                                    <div id="brc-room_price_font3">
                                        <img src={yes} />
                                        满7天立减6%
                                        <img src={yes} />
                                        满28天立减10%
                                    </div>
                                    <div id="brc-room_price_font4">
                                        <img src={small_star} />
                                        <b>150条</b>
                                    </div>
                                </div>
                                <div className="col-md-10 col-md-offset-1">
                                    <b>日期</b>
                                </div>
                                <div id="brc-small_date" className="col-md-10 col-md-offset-1">
                                    <div className=" col-md-6">
                                        <input type="text" id="brc-small_datein" className="form-control" placeholder="入住"/>
                                    </div>
                                    <div className=" col-md-6">
                                        <input type="text" id="brc-small_dateout" className="form-control" placeholder="退房"/>
                                    </div>
                                </div>

                                <div className="col-md-10 col-md-offset-1">
                                    <b>房客</b>
                                </div>
                                <div id="brc-roomer_number" className="btn-group col-md-10 col-md-offset-1">
                                    <button className="btn btn-lg btn-default col-md-10">1位房客</button>
                                    <button data-toggle="dropdown" className="btn btn-lg btn-default dropdown-toggle col-md-2"><span className="caret"/></button>
                                    <ul className="dropdown-menu">
                                        <li>
                                            <a href="#">1位房客</a>
                                        </li>
                                        <li>
                                            <a href="#">2位房客</a>
                                        </li>
                                        <li>
                                            <a href="#">3位房客</a>
                                        </li>
                                        <li>
                                            <a href="#">4位房客</a>
                                        </li>
                                        <li className="divider">
                                        </li>
                                        <li className="disabled">
                                            <a href="#">最多4位房客，婴幼儿不计算在内。</a>
                                        </li>
                                    </ul>
                                </div>
                                <div id="brc-reserve_button" className="col-md-10 col-md-offset-1">
                                    <button type="button" className="btn btn-lg btn-danger btn-block">预定</button>
                                </div>
                                <div id="brc-small_notice" className="col-md-12">
                                    <b>您暂时不会被收费</b>
                                </div>
                                <div id="brc-report" className="col-md-10 col-md-offset-1">
                                    <img src={report} />
                                </div>
                            </div>
                        </div>

                        <div className="col-md-8 col-md-offset-2">
                            {/*类似房源*/}
                            <div className="wjc-three-layout wjc-story">
                                <div className="row">
                                    <button type="button" className="wjc-layout-title btn btn-link col-md-6">
                                        <div className="wjc-layout-title-main">类似房源</div>
                                    </button>
                                </div>
                                <div className="wjc-layout-content row container">
                                    <div className="row wjc-layout-content-row">
                                        <div className="col-md-4">
                                            <a href="*">
                                                <div className="wjc-layout-content-image" >
                                                    <img src={similar}/>
                                                    {/*style="opacity:{this.state.opacity};"*/}
                                                    <div>
                                                        <button type="button" className="wjc-story-thumbsup">
                                                            <svg viewBox="0 0 32 32" fill="#484848" fillOpacity="0.5" stroke="#ffffff"
                                                                 strokeWidth="2.5" focusable="false" aria-label="添加房源到心愿单" role="img"
                                                                 strokeLinecap="round" strokeLinejoin="round" >
                                                                {/*style="height: 28px; width: 28px; display: block; overflow: visible;"*/}
                                                                <path d="m23.99 2.75c-.3 0-.6.02-.9.05-1.14.13-2.29.51-3.41 1.14-1.23.68-2.41 1.62-3.69 2.94-1.28-1.32-2.46-2.25-3.69-2.94-1.12-.62-2.27-1-3.41-1.14a7.96 7.96 0 0 0 -.9-.05c-1.88 0-7.26 1.54-7.26 8.38 0 7.86 12.24 16.33 14.69 17.95a1 1 0 0 0 1.11 0c2.45-1.62 14.69-10.09 14.69-17.95 0-6.84-5.37-8.38-7.26-8.38"></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <div>
                                                        <span className="wjc-tag-2">房源</span>
                                                    </div>
                                                </div>
                                                <div className="wjc-layout-content-info airbnb-red">
                                                    <span className="wjc-tag">PLUS</span>
                                                    {/*style="background:rgb(166, 29, 85);"*/}
                                                    <span >2张床</span>
                                                    {/*style="color:rgb(166, 29, 85)"*/}
                                                </div>
                                                <div className="wjc-layout-content-description">
                                                    有摩登与复古，网红民宿打卡地的南京西路地铁口老洋房新风尚整套独户房
                                                </div>
                                                <div className="wjc-layout-content-price">
                                                    <span>￥1,398每晚</span>
                                                </div>
                                                <div className="wjc-layout-content-comment airbnb-red">

                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star-half-o" aria-hidden="true"/>
                                                    <i className="fa fa-star-o" aria-hidden="true"/>
                                                    <span className="wjc-evaluation">82</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div className="col-md-4">
                                            <a href="*">
                                                <div className="wjc-layout-content-image">
                                                    <img src={similar}/>
                                                    <div>
                                                        <button type="button" className="wjc-story-thumbsup">
                                                            <svg viewBox="0 0 32 32" fill="#484848" fillOpacity="0.5" stroke="#ffffff"
                                                                 strokeWidth="2.5" focusable="false" aria-label="添加房源到心愿单" role="img"
                                                                 strokeLinecap="round" strokeLinejoin="round">
                                                                {/*style="height: 28px; width: 28px; display: block; overflow: visible;"*/}
                                                                <path d="m23.99 2.75c-.3 0-.6.02-.9.05-1.14.13-2.29.51-3.41 1.14-1.23.68-2.41 1.62-3.69 2.94-1.28-1.32-2.46-2.25-3.69-2.94-1.12-.62-2.27-1-3.41-1.14a7.96 7.96 0 0 0 -.9-.05c-1.88 0-7.26 1.54-7.26 8.38 0 7.86 12.24 16.33 14.69 17.95a1 1 0 0 0 1.11 0c2.45-1.62 14.69-10.09 14.69-17.95 0-6.84-5.37-8.38-7.26-8.38"/>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <div>
                                                        <span className="wjc-tag-2">房源</span>
                                                    </div>
                                                </div>
                                                <div className="wjc-layout-content-info airbnb-red">
                                                    <span className="wjc-tag">PLUS</span>
                                                    {/*style="background:rgb(166, 29, 85);"*/}
                                                    <span >2张床</span>
                                                    {/*style="color:rgb(166, 29, 85)"*/}
                                                </div>
                                                <div className="wjc-layout-content-description">
                                                    有摩登与复古，网红民宿打卡地的南京西路地铁口老洋房新风尚整套独户房
                                                </div>
                                                <div className="wjc-layout-content-price">
                                                    <span>￥1,398每晚</span>
                                                </div>
                                                <div className="wjc-layout-content-comment airbnb-red">

                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star-half-o" aria-hidden="true"/>
                                                    <i className="fa fa-star-o" aria-hidden="true"/>
                                                    <span className="wjc-evaluation">82</span>
                                                </div>
                                            </a>
                                        </div>
                                        <div className="col-md-4">
                                            <a href="*">
                                                <div className="wjc-layout-content-image">
                                                    <img src={similar}/>
                                                    <div>
                                                        <button type="button" className="wjc-story-thumbsup">
                                                            <svg viewBox="0 0 32 32" fill="#484848" fillOpacity="0.5" stroke="#ffffff"
                                                                 strokeWidth="2.5" focusable="false" aria-label="添加房源到心愿单" role="img"
                                                                 strokeLinecap="round" strokeLinejoin="round">
                                                                {/*style="height: 28px; width: 28px; display: block; overflow: visible;"*/}
                                                                <path d="m23.99 2.75c-.3 0-.6.02-.9.05-1.14.13-2.29.51-3.41 1.14-1.23.68-2.41 1.62-3.69 2.94-1.28-1.32-2.46-2.25-3.69-2.94-1.12-.62-2.27-1-3.41-1.14a7.96 7.96 0 0 0 -.9-.05c-1.88 0-7.26 1.54-7.26 8.38 0 7.86 12.24 16.33 14.69 17.95a1 1 0 0 0 1.11 0c2.45-1.62 14.69-10.09 14.69-17.95 0-6.84-5.37-8.38-7.26-8.38"></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                    <div>
                                                        <span className="wjc-tag-2">房源</span>
                                                    </div>
                                                </div>
                                                <div className="wjc-layout-content-info airbnb-red">
                                                    <span className="wjc-tag" >PLUS</span>
                                                    {/*style="background:rgb(166, 29, 85);"*/}
                                                    <span >2张床</span>
                                                    {/*style="color:rgb(166, 29, 85)"*/}
                                                </div>
                                                <div className="wjc-layout-content-description">
                                                    有摩登与复古，网红民宿打卡地的南京西路地铁口老洋房新风尚整套独户房
                                                </div>
                                                <div className="wjc-layout-content-price">
                                                    <span>￥1,398每晚</span>
                                                </div>
                                                <div className="wjc-layout-content-comment airbnb-red">

                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star" aria-hidden="true"/>
                                                    <i className="fa fa-star-half-o" aria-hidden="true"/>
                                                    <i className="fa fa-star-o" aria-hidden="true"/>
                                                    <span className="wjc-evaluation">82</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            {/*网页尾部*/}
            <div className="container">
                <div className="row">
                    <ul className="col-md-3 list-unstyled">
                        <li className="wjc-footer-title">爱彼迎</li>
                        <li>
                            <a href="#">工作机会</a>
                        </li>
                        <li>
                            <a href="#">新闻</a>
                        </li>
                        <li>
                            <a href="#">政策</a>
                        </li>
                        <li>
                            <a href="#">帮助</a>
                        </li>
                        <li>
                            <a href="#">多元化与归属感</a>
                        </li>
                    </ul>
                    <ul className="col-md-3 list-unstyled">
                        <li className="wjc-footer-title">发现</li>
                        <li>
                            <a href="#">信任与安全</a>
                        </li>
                        <li>
                            <a href="#">旅行基金</a>
                        </li>
                        <li>
                            <a href="#">爱彼迎公民</a>
                        </li>
                        <li>
                            <a href="#">商务差旅</a>
                        </li>
                        <li>
                            <a href="#">旅游指南</a>
                        </li>
                        <li>
                            <a href="#">爱彼迎杂志</a>
                        </li>
                        <li>
                            <a href="#">活动</a> <span className="wjc-tag">new</span>
                        </li>
                    </ul>
                    <ul className="col-md-3 list-unstyled">
                        <li className="wjc-footer-title">出租</li>
                        <li>
                            <a href="#">为什么要出租？</a>
                        </li>
                        <li>
                            <a href="#">待客之道</a>
                        </li>
                        <li>
                            <a href="#">房东义务</a>
                        </li>
                        <li>
                            <a href="#">开展体验</a> <span className="wjc-tag">new</span>
                        </li>
                        <li>
                            <a href="#">Open Homes</a> <span className="wjc-tag">new</span>
                        </li>
                    </ul>
                    <ul className="col-md-3 list-unstyled">
                        <li className="wjc-footer-icon">
                            <a href="http://www.weibo.com/airbnb">
                                <i className="fa fa-weibo" aria-hidden="true"></i>
                            </a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="#">
                                <i className="fa fa-weixin" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">条款</a>
                        </li>
                        <li>
                            <a href="#">隐私政策</a>
                        </li>
                        <li>
                            <a href="#">网站地图</a>
                        </li>
                    </ul>
                </div>
                <div className="wjc-footer-row">
                    <div>
                        <div>
                            <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false">
                                {/*style="height: 1.5em; width: 1.5em; display: block; fill: rgb(118, 118, 118);"*/}
                                <path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"/>
                            </svg>
                        </div>
                        <div>
                            <div>
                                京ICP备16017121号-3 京ICP证 160773号
                                <img src={public_security_bureau_logo}
                                     alt="网警"/>
                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502032345"
                                       target="_blank">
                                        京公网安备 11010502032345号
                                    </a>
                                    安彼迎网络（北京）有限公司
                            </div>
                            <div>© Airbnb, Inc.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
);
}

export default Index;